<template>
  <div class="app-container">
    <div v-show="active === 1">
      <!-- 查询条件 -->
      <div class="searchform">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="search"
          size="mini"
          label-width="90px"
          label-position="right">
          <el-form-item prop="orgId" label="上级部门">
            <companyOrgSelect
              v-model="search.orgName"
              :org-id.sync="search.orgId"
              :org-name="search.orgName"
              class="search-input"
              @getComOrgTree="getComOrgTree" />
          </el-form-item>
          <br>
          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="reset">重置
              </el-button>
            </el-form-item>
          </div>

        <!-- <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="add">新增
          </el-button>
        </el-form-item> -->
        </el-form>
      </div>
      <div class="tableHead">
        <div class="tabletitle">部门管理信息</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="add">新增
            </el-button>
          </el-button-group>
        </div>
      </div>
      <!-- 用户列表 -->
      <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column label="序号" type="index" min-width="50"/>
        <el-table-column align="center" label="操作" min-width="50">
          <template slot-scope="scope">
            <el-tooltip class="item" content="编辑" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="edit(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="PARENT_ORG_NAME" label="上级部门" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="ORG_CODE" label="部门代码" min-width="100" show-overflow-tooltip/>
        <el-table-column prop="ORG_NAME" label="部门名称" min-width="100" show-overflow-tooltip/>
        <el-table-column :formatter="filterCode" prop="STATUS" label="状态" min-width="100" type="1001"/>
      </BaseTable>
    </div>
    <!-- 新增div -->
    <div v-show="active === 2">
      <div class="searchform">
        <el-form ref="addSearchForm" :inline="true" :model="addSearch" :rules="rules" size="mini" label-width="90px">
          <el-form-item prop="orgCode" label="组织代码">
            <el-input v-model="addSearch.orgCode" placeholder="组织代码" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="orgName" label="组织名称">
            <el-input v-model="addSearch.orgName" placeholder="组织名称" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="parentOrgId" label="上级组织">
            <companyOrgSelect
              v-model="addSearch.parentOrgId"
              :org-id.sync="search.orgId"
              :org-name="search.orgName"
              class="search-input"
              @getComOrgTree="getComOrgTree" />
          </el-form-item>
          <!-- <br /> -->
          <el-form-item prop="status" label="组织状态">
            <r-select v-model="addSearch.status" :formatter="filterCode" class="search-input" placeholder="请选择" type="1001"/>
          </el-form-item>
          <el-form-item prop="orgType" label="组织类型">
            <r-select v-model="addSearch.orgType" :formatter="filterCode" class="search-input" disabled placeholder="请选择" type="1680"/>
          </el-form-item>
          <!-- <el-form-item prop="busiType" label="业务类型">
          <r-select v-model="addSearch.busiType" class='search-input' placeholder="请选择" type="1660" :formatter="filterCode"></r-select>
        </el-form-item> -->
          <el-form-item prop="remark" label="备注">
            <el-input v-model="addSearch.remark" placeholder="备注" class="search-input" clearable />
          </el-form-item>

        </el-form>
      </div>
      <div style="text-align:center">
        <el-button type="primary" @click="addSave">保存</el-button>
        <el-button @click="clear">返回</el-button>
      </div>
    </div>
    <!-- 编辑div -->
    <div v-show="active === 3">
      <div class="searchform">
        <el-form ref="editSearchForm" :inline="true" :model="editSearch" :rules="ruless" size="mini" label-width="90px">
          <el-form-item prop="orgCode" label="组织代码">
            <el-input v-model="editSearch.orgCode" placeholder="组织代码" class="search-input" disabled />
          </el-form-item>
          <el-form-item prop="orgName" label="组织名称">
            <el-input v-model="editSearch.orgName" placeholder="组织名称" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="parentOrgName" label="上级组织">
            <el-input
              v-model="editSearch.parentOrgName"
              placeholder="上级组织"
              class="search-input"
              style="width:200px"
              disabled />
          </el-form-item>
          <el-form-item prop="status" label="组织状态">
            <r-select v-model="editSearch.status" :formatter="filterCode" class="search-input" placeholder="请选择" type="1001"/>
          </el-form-item>
          <el-form-item prop="orgType" label="组织类型">
            <r-select v-model="editSearch.orgType" :formatter="filterCode" class="search-input" disabled placeholder="请选择" type="1680"/>
          </el-form-item>
          <!-- <el-form-item prop="busiType" label="业务类型">
          <r-select v-model="editSearch.busiType" class='search-input' placeholder="请选择" type="1660" :formatter="filterCode"></r-select>
        </el-form-item> -->
          <el-form-item prop="remark" label="备注">
            <el-input v-model="editSearch.remark" placeholder="备注" class="search-input" clearable />
          </el-form-item>

          <div style="text-align:center">
            <el-button type="primary" @click="editSave">保存</el-button>
            <el-button @click="clear">返回</el-button>
          </div>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import {
  getComOrgList,
  // getComOrgTreeList,
  saveComOrgList,
  editSaveComOrgList
} from '@/api/admin/org/companyOrgManage'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import filtercode from '@/components/Checkbox/filtercode'
import companyOrgSelect from './companyOrgSelect'
import rSelect from '@/components/Select/Select'
import _ from 'lodash'
import {
  mapGetters
} from 'vuex'
import { systemCode } from '@/utils/validator'
export default {
  name: 'CompanyOrgManage',
  components: {
    BaseTable,
    filtercode,
    companyOrgSelect,
    rSelect
  },
  mixins: [formMixins],
  data() {
    return {
      active: 1,
      form: {},
      list: [],
      load: false,
      page: {},
      multipleSelection: [],
      returnList: [],
      search: {
        limit: 10,
        pageNum: 1,
        orgName: '',
        orgId: ''
      },
      addSearch: {
        orgCode: '',
        orgName: '',
        parentOrgId: '',
        parentOrgName: '',
        status: '',
        orgType: '',
        busiType: '',
        remark: ''
      },
      editSearch: {
        orgId: '',
        orgCode: '',
        orgName: '',
        parentOrgId: '',
        parentOrgName: '',
        status: '',
        orgType: '',
        busiType: '',
        remark: ''
      },
      rules: {
        orgCode: [{
          required: true,
          message: '请输入组织代码',
          trigger: 'blur'
        },
        { trigger: 'blur', validator: systemCode }
        ],
        orgName: [{
          required: true,
          message: '请输入组织名称',
          trigger: 'blur'
        }]
        // parentOrgId: [{
        //   required: true,
        //   message: '请选择上级组织',
        //   trparentOrgIdigger: "blur"
        // }]
      },
      ruless: {
        orgName: [{
          required: true,
          message: '请输入组织名称',
          trigger: 'blur'
        }]
      }

    }
  },
  // userInfo用户信息systemParam系统参数
  computed: {
    ...mapGetters(['userInfo', 'systemParam'])
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      getComOrgList(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 新增
    add() {
      this.active = 2
      this.$nextTick(() => {
        this.$refs.addSearchForm.clearValidate()
        this.addSearchForm = {}
      })
      this.addSearch.status = 10011001
      this.addSearch.orgType = 16801002
      this.addSearch.busiType = 16601001
    },
    // 编辑
    edit(data) {
      this.active = 3
      this.$nextTick(() => {
        this.$refs.editSearchForm.clearValidate()
        this.editSearchForm = {}
      })
      this.editSearch.orgId = data.ORG_ID
      this.editSearch.parentOrgId = data.PARENT_ORG_ID
      this.editSearch.parentOrgName = data.PARENT_ORG_NAME
      this.editSearch.orgCode = data.ORG_CODE
      this.editSearch.orgName = data.ORG_NAME
      this.editSearch.remark = data.REMARK
      this.editSearch.status = data.STATUS
      this.editSearch.orgType = data.ORG_TYPE
      this.editSearch.busiType = data.BUSI_TYPE
      debugger
    },
    getComOrgTree(val) {
      debugger
      this.search.orgId = val.orgId
      this.search.orgName = val.orgName
      this.addSearch.parentOrgId = val.orgId
    },
    reset() {
      debugger
      this.search.orgName = ''
      this.search.orgId = ''
      this.searchHandle()
    },
    // 保存
    addSave() {
      this.$refs['addSearchForm'].validate((valid) => {
        if (valid) {
          const dto = {
            orgCode: this.addSearch.orgCode,
            orgName: this.addSearch.orgName,
            parentOrgId: this.addSearch.parentOrgId,
            status: this.addSearch.status,
            orgType: this.addSearch.orgType,
            busiType: this.addSearch.busiType,
            remark: this.addSearch.remark
          }
          debugger
          saveComOrgList(dto).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.active = 1
            this.search.orgId = ''
            this.search.orgName = ''
            this.addSearch.parentOrgId = ''
            this.addSearch.orgCode = ''
            this.addSearch.orgName = ''
            this.addSearch.remark = ''
            this.searchHandle()
          }).catch(err => {
            // this.$message({
            //   type: "error",
            //   message: "保存出错，请联系管理员!"
            // });
            // return false;
          })
        }
      })
    },
    // 编辑保存
    editSave() {
      this.$refs['editSearchForm'].validate((valid) => {
        if (valid) {
          const orgId = this.editSearch.orgId
          const dto = {
            orgCode: this.editSearch.orgCode,
            orgName: this.editSearch.orgName,
            parentOrgId: this.editSearch.parentOrgId,
            status: this.editSearch.status,
            orgType: this.editSearch.orgType,
            busiType: this.editSearch.busiType,
            remark: this.editSearch.remark
          }
          debugger
          editSaveComOrgList(orgId, dto).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.active = 1
            this.editSearch.orgId = ''
            this.editSearch.orgName = ''
            this.editSearch.parentOrgId = ''
            this.editSearch.orgCode = ''
            this.editSearch.orgName = ''
            this.editSearch.remark = ''
            this.searchHandle()
          }).catch(err => {
            // this.$message({
            //   type: "error",
            //   message: "保存出错，请联系管理员!"
            // });
            // return false;
          })
        }
      })
    },
    // 返回清空列表
    clear() {
      debugger
      this.search.orgId = ''
      this.search.orgName = ''
      this.addSearch.parentOrgId = ''
      this.addSearch.orgCode = ''
      this.addSearch.orgName = ''
      this.addSearch.remark = ''
      this.editSearch.orgId = ''
      this.editSearch.orgName = ''
      this.editSearch.parentOrgId = ''
      this.editSearch.orgCode = ''
      this.editSearch.orgName = ''
      this.editSearch.remark = ''
      this.active = 1
    }
  }
}

</script>

<style scoped>

</style>
